<template>
  <div class="container">
    <van-tabs @change="refreshActive" swipeable sticky animated color="#ff4d03" title-active-color="#ff4d03" title-inactive-color="#b0b0b0" :active="active">
      <van-tab title=待评价>
        <div style="min-height: 800rpx" v-if="courseList.length>0">
          <div class="card_item" v-for="(item,index) in courseList" :key="item.courseId">
            <image :src="item.coursePic" class="photo" alt=""></image>
            <div class="card_item_right">
              <div class="item_title">
                <text class="course_name">{{ item.courseName }}</text>
              </div>
              <div class="study_rate">
                <text class="study_rate_value">{{ item.credit }}学分</text>
                <text class="study_time">| 已完成</text>
              </div>
              <div class="card_item_bottom">
                <div class="count_part">
                  <img class="count_icon" src="../../static/images/course/icon1.png" alt="">
                  <text>{{ item.principalName }}</text>
                </div>
                <div @click="navTo('/pages_mine/mine/appraiseCrouse',1,item)" class="evaluate_btn">
                  评价
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="courseList.length==0">
          <van-empty description="暂无数据" />
        </div>
      </van-tab>
      <van-tab title=已评价>
        <div style="width: 100%;display: flex;align-items: center;background: white">
          <div style="width: 50%;">
            <van-dropdown-menu active-color="#ff4d03">
              <van-dropdown-item @change="change($event,'semester')" :value="semester" :options="semesterList" />
              <van-dropdown-item @change="change($event,'courseType')" :value="courseType" :options="courseTypeList" />
            </van-dropdown-menu>
          </div>
          <div style="width: 50%;">
            <van-search
                shape="round"
                :value="courseName"
                input-align="center"
                @change="changeCourseName"
                placeholder="请输入课程名称"
            />
          </div>
        </div>
        <div style="min-height: 800rpx" v-if="courseList.length>0">
          <div class="card_item" v-for="(item,index) in courseList" :key="item.courseId">
            <image :src="item.coursePic" class="photo" alt=""></image>
            <div class="card_item_right">
              <div class="item_title">
                <text class="course_name">{{ item.courseName }}</text>
              </div>
              <div class="study_rate">
                <text class="study_rate_value">{{ item.credit }}学分</text>
                <text class="study_time">| 已完成</text>
              </div>
              <div class="card_item_bottom">
                <div class="count_part">
                  <img class="count_icon" src="../../static/images/course/icon1.png" alt="">
                  <text>{{ item.principalName }}</text>
                </div>
                <div @click="navTo('/pages_mine/mine/appraiseCrouse',2,item)" class="evaluate_detial_btn">
                  评价详情
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="courseList.length==0">
          <van-empty description="暂无数据" />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {getEvaluateCourseList,getSemesterList} from "../../common/api/mine";

export default {
  name: "evaluate",
  data() {
    return {
      active:0,
      semester:-1,
      courseName:'',
      courseType:-1,
      userInfo:{},
      courseList:[],
      semesterList:[
        {
          value:-1,
          text:'全部学期'
        }
      ],
      courseTypeList:[
        {
          value:-1,
          text:'全部类型'
        },
        {
          value:0,
          text:'必修'
        },
        {
          value:1,
          text:'选修'
        },
        {
          value:2,
          text:'考证'
        },
        {
          value:3,
          text:'工学'
        }
      ]
    }
  },
  onShow() {
    this.userInfo=uni.getStorageSync('userInfo')
    this.getEvaluateCourseList()
  },

  onPullDownRefresh(){
    this.getEvaluateCourseList('stop')
  },
  onLoad(option) {

  },
  methods: {
    changeCourseName(e) {
      this.courseName=e.detail
      this.getEvaluateCourseList()
    },
    change(e,type){
      this[type]=e.detail
      this.getEvaluateCourseList()
    },
    //获取学期列表
    async getSemesterList(){
      this.semesterList=[
        {
          value:-1,
          text:'全部学期'
        }
      ]
      let res=await getSemesterList()
      const {code,data}=res
      if (code==200){
        for (const datum of data) {
          let obj={
            value:datum.semesterId,
            text:datum.semesterName
          }
          this.semesterList.push(obj)
        }
      }
    },
    async getEvaluateCourseList(num){
      let params={
        studentId:this.userInfo.typeId,
        evaluateStatus:this.active,
        semesterId:this.semester==-1?'':this.semester,
        courseType:this.courseType==-1?'':this.courseType,
        courseName:this.courseName,
      }
      let res = await getEvaluateCourseList(this.userInfo.typeId,params)
      const {code,data}=res
      if (code==200){
        if (num=='stop'){
          uni.stopPullDownRefresh()
        }
        this.courseList=data
      }else {
        if (num=='stop'){
          uni.stopPullDownRefresh()
        }
      }
    },
    refreshActive(e){
      this.active=e.detail.index
      if (e.detail.index==1){
        this.getSemesterList()
      }
      this.getEvaluateCourseList()
    },
    navTo(url,type,item){
      uni.navigateTo({
        url:`${url}?type=${type}&name=${item.courseName}&courseId=${item.courseId}&workstationId=${item.workstationId?item.workstationId:''}&item=${JSON.stringify(item)}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  width: 750rpx;
  min-height: 100vh;
  background: #fafafa;
  .card_item{
    margin-top: 20rpx;
    width: 100%;
    min-height: 200rpx;
    background: #FFFFFF;
    padding: 32rpx;
    box-sizing: border-box;
    display: flex;
    .photo{
      width: 214rpx;
      height: 136rpx;
      background: #6386E0;
      border-radius: 16rpx;
    }
    &_right{
      flex: 1;
      margin-left: 24rpx;
      .item_title{
        display: flex;
        align-items: center;
        .course_name{
          width: 432rpx;
          font-size: 30rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .study_rate{
        margin-bottom: 12rpx;
        .study_rate_value{
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FB9A55;
        }
        .study_time{
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          margin-left: 6rpx;
        }
      }
      .card_item_bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .count_part{
          display: flex;
          align-items: center;
          .count_icon{
            width: 32rpx;
            height: 32rpx;
          }
          text{
            margin-left: 4rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
          }
        }
        .evaluate_btn {
          @include btn_plain_line(linear-gradient(140deg, #41DDB1 0%, #ff4d03 100%), #ffffff, #36caa0) {
            width: 144rpx;
            height: 56rpx;
            border-radius: 32rpx;
          }
        }
        .evaluate_detial_btn {
          @include btn_plain(#ffffff, #999999) {
            width: 160rpx;
            height: 56rpx;
            border-radius: 32rpx;
            border: 2rpx solid #DDDDDD;
          }
        }
      }
    }
  }
}
.search_select{
  width: 100%;
  padding: 32rpx;
  box-sizing: border-box;
  background: white;
}
::v-deep .van-dropdown-menu{
  box-shadow: none;
}
</style>
